import Indicator from "@/base-ui/indicator"
import React, { memo, useState } from "react"
import { DemoWrapper } from "./style"

const Demo = memo((props) => {
    const names = ["csb", "bsa", "bs", "cab", "cpb"]
    const [selectIndex, setSelectIndex] = useState(0)

    function toggleClickHandle(isNext = true) {
        let newIndex = isNext ? selectIndex + 1 : selectIndex - 1
        // 判断特殊情况 第一个再次点击时
        if (newIndex < 0) newIndex = names.length - 1
        // 最后一个再次点击时
        if (newIndex > names.length - 1) newIndex = 0
        setSelectIndex(newIndex)
    }
    return (
        <DemoWrapper>
            <div className="control">
                <button onClick={(e) => toggleClickHandle(false)}>上一个</button>
                <button onClick={(e) => toggleClickHandle(true)}>下一个</button>
            </div>
            <div className="list">
                <Indicator selectIndex={selectIndex}>
                    {names.map((item) => {
                        return <button key={item}>{item}</button>
                    })}
                </Indicator>
            </div>
        </DemoWrapper>
    )
})


export default Demo
